<template>
    <div>

            <div v-if="setp == 0">
                <div class="guide-item" style="position: relative;">
                    <div>
                        <div class="center">
                            <div>
                                <div class="guide-item_index" style="margin-top: 50px;">
                                    HOW TO EARN AIRDROP
                                </div>
                                <div class="guide-itme-title" style="width: 150px; font-size: 26px; display: flex;justify-content: center;margin: 0 auto;">Play game & earn points</div>
                                <div class="guide-item-bot"></div>
                            </div>
                                    <img src="../static/Ellipse 2.png" style="width: 100%; height: 480px;position: fixed;top: 15%;left: 0;"/>

                        </div>
                        <div class="guide-item-bot-img" style="z-index: 1000;">
                            <img src="../static/img/Dawg.png"></img>
                        </div>
                    </div>
                </div>
            </div>
            <div v-if="setp == 1">
                <div class="guide-item">
                    <div>
                        <div class="center">
                            <div>
                                <div class="guide-item_index" style="margin-top: 50px;">
                                    HOW TO EARN AIRDROP
                                </div>
                                <div class="guide-itme-title" style="width:310px;font-size: 26px;">Complete missions and check in daily
                                </div>
                                <div class="guide-item-giy" style="position: relative;">
                                    <img src="../static/Ellipse 2.png" style="width: 100%; height: 480px;position: fixed;top: 15%;left: 0;"/>
                                    <img style="width: 279px;height: 379px;" mode="widthFix"
                                        src="../static/img/Group 9101.png"></img>
                                    <div style="position: absolute;color: #fff; top: 49%;right: 25%;font-size: 12px;">
                                        Follow on X</div>
                                    <div
                                        style="display: flex;align-items: center;  position: absolute;top: 20%; background: #0A395E;width: 232px;height: 65px;border-radius: 6px;">
                                        <div>
                                            <img src="../static/img/Telegram.png"
                                                style="margin-left: 18px;margin-top: -0px; width: 36px;height: 36px;">
                                            </img>
                                        </div>
                                        <div style="width: 190px;font-size: 12px;">Join $DAWG Telegram</div>
                                    </div>
                                    <div
                                        style="display: flex;align-items: center; left: 7%;  position: absolute;top: 64.5%; background: #0A395E;width: 210px;height: 65px;border-radius: 10px;">
                                        <div>
                                            <img src="../static/img/Telegram.png"
                                                style="margin-left: 18px;margin-top: -0px; width: 36px;height: 36px;">
                                            </img>
                                        </div>
                                        <div style="width: 130px;font-size: 12px;">Daily Check-in</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div v-if="setp == 2">
                <div class="guide-item">
                    <div>
                        <div class="center">
                            <div>
                                <div class="guide-item_index" style="margin-top: 50px;">
                                    HOW TO EARN AIRDROP
                                </div>
                                <div class="guide-itme-title" style="width:340px;margin: 0 auto; font-size: 26px;text-align: center;">Share and earn extra %
                                    of your friends' points</div>
                                <div>
                                    <img src="../static/Ellipse 2.png" style="width: 100%; height: 480px;position: fixed;top: 15%;left: 0;"/>

                                    <div
                                        style="float: right; margin-top: 30px;margin-right: 50px; background: #0A395E;width: 160px;border-radius: 10px; font-size: 12px; height: 48px;color: #fff;"
                                        class="center">
                                        Join the $DAWG pack
                                    </div>
                                    <img  src="../static/img/gym_white.png"
                                        style="width: 342px;height: 342px;" mode="widthFix" />
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div v-if="setp == 3">
                <div class="guide-item">
                    <div>
                        <div class="center">
                            <div>
                                <div class="guide-item_index " style="margin-top: 50px;">
                                    HOW TO EARN AIRDROP
                                </div>
                                    <img src="../static/Ellipse 2.png" style="width: 100%; height: 480px;position: fixed;top: 15%;left: 0;"/>

                                <div class="guide-itme-title" style="width:340px;font-size: 26px;margin: 0 auto;">Add wallet address to
                                    receive airdrop</div>
                                <div style="position: relative;">
                                    <!-- <div style="position: absolute; top: 80px;left: 20%;box-sizing:border-box; background: linear-gradient(180deg, rgba(193, 227, 255, 0.4) 43.21%, rgba(249, 245, 190, 0.4) 172.84%); width: 229px;height: 281px;border-radius: 50%;"></div> -->
                                    <img src="../static/img/Group 9102.png"
                                        style="width: 365px;height: 396px;margin-top: 10px;" mode="widthFix"></img>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
    </div>
</template>

<script>
export default {
    props: {
        setp: {
            type: Number,
            default: 0
        }
    },
    data() {
        return {
            autoplay: false,
            circular: false,
            indicatordots: false
        }
    },
    methods: {

    }
}
</script>

<style lang="scss" scoped>
.guide{
		width: 100%;
		position: fixed;
		bottom: 20px;
		&_bottom{
			width: 90%;
			margin-left: 5%;
			display: flex;
			justify-content: space-between;
		}
	}
	.skip{
		width: 22%;
		height: 54px;
		border-radius: 10px;
		color: #F6CB23;
		font-size: 17px;
		border: 1px solid #F6CB23;
		
	}
	.next{
		width: 70%;
		height: 54px;
		border-radius: 10px;
		background: #F6CB23;
		color:#000;
		font-size: 17px;
	}

	.guideSwiper{
		height: 82vh;
		// background: rebeccapurple;
		position: fixed;
		bottom: 120px;
		width: 100%;
	}
	.dos{
		width: 51px;
		height: 3px;
		border-radius: 5px;
		background: #848484;
		margin-right: 5px;
	}
	.guide-item{
		color:#fff;
		position: relative;
		text-align: center;
		width: 100%;
		display: flex;
		justify-content: center;
	}
	.guide-item_index{
		margin-bottom: 50px;
		margin-top: 20px;
		font-size: 13px;
        font-family: 'Inter';
        font-weight: 700;
		text-align: center;
	}
	.guide-itme-title{
		font-size: 24px;
		width: 180px;
		font-weight: bold;
		text-align: center;
	}
	.guide-item-bot{
		width: 202px;
		height: 276px;
		margin-top: 50px;
		border-radius: 10px;
		background-color: #59626F;
		position: relative;
	}
	.guide-item-bot::before{
		content: " ";
		position: absolute;
		width: 42px;
		height: 5px;
		border-radius: 10px;
		top: 20px;
		background-color: #000;
		left: 80px;
	}
	.guide-item-bot-img{
		img{
			width: 327px;
			height: 327px;
			margin-top: -200px;
            position: absolute;
            left: 7%;
		}
	}
	.guide-item-giy{
		position: relative;
		img{
			margin-top: 20px;
		}
	}
</style>